<div>
    <img id="1">
    <img id="2">
</div>
<script src="../jquery-3.2.0.js"></script>
<script src="js/mergePic.js"></script>
<script>
    let imgPath1 = "png/answer.jpg"
    let imgPath2 = "png/signature.jpg"
    let merge = new mergePic();

    let p1 = merge.getImgInfo(imgPath1);
    let p2 = merge.getImgInfo(imgPath2);
    Promise.all([p1, p2]).then((img) => {
        mergeBase(img[0], img[1]);
    }).catch((err) => {
        console.log(err);
    });

    let mergeBase = function (img1, img2) {
        let img1_width = img1.naturalWidth;
        let img1_height = img1.naturalHeight;
        let img2_width = img2.naturalWidth;
        let img2_height = img2.naturalHeight;
        let baseCode1 = img1.baseCode;
        let baseCode2 = img2.baseCode;
        let param1 = {};
        let param2 = {};
        let sign_x = img2_width > img1_width ? img2_width - img1_width : img1_width - img2_width;
        param2.x = sign_x;

        console.log("nature size:\r\nimg1_width:" + img1_width + "\r\nimg1_height:" + img1_height + "\r\nimg2_width:" + img2_width + "\r\nimg2_height:" + img2_height);

        let param = new Array();
        {
            let p = {}
            p.x = sign_x - 100;
            p.y = img1_height + 20;
            p.font = "20px 微软雅黑";
            p.content = "客户签名：";
            param.push(p);
        }
        {
            let p = {};
            p.x = 0;
            p.y = img1_height + 20;
            p.font = "20px 微软雅黑";
            p.content = "客户姓名：";
            param.push(p);
        }
        {
            let p = {};
            p.x = 100;
            p.y = img1_height + 20;
            p.font = "20px 微软雅黑";
            p.content = "balabala";
            param.push(p);
        }
        {
            let p = {};
            p.x = 0;
            p.y = img1_height + 20 * 2 + 5;
            p.font = "20px 微软雅黑";
            p.content = "证件号码：";
            param.push(p);
        }
        {
            let p = {};
            p.x = 100;
            p.y = img1_height + 20 * 2 + 5;
            p.font = "20px 微软雅黑";
            p.content = "1234567890";
            param.push(p);
        }
        {
            let p = {};
            p.x = 0;
            p.y = img1_height + 20 * 3 + 10;
            p.font = "20px 微软雅黑";
            p.content = "交易日期：";
            param.push(p);
        }
        {
            let p = {};
            p.x = 100;
            p.y = img1_height + 20 * 3 + 10;
            p.font = "20px 微软雅黑";
            p.content = "2018/06/29";
            param.push(p);
        }
        {
            let p = {};
            p.x = 0;
            p.y = img1_height + 20 * 4 + 15;
            p.font = "20px 微软雅黑";
            p.content = "交易时间：";
            param.push(p);
        }
        {
            let p = {};
            p.x = 100;
            p.y = img1_height + 20 * 4 + 15;
            p.font = "20px 微软雅黑";
            p.content = "08:38";
            param.push(p);
        }
        merge.merge(baseCode1, baseCode2, param1, param2).then(function (baseCode) {
            let img1 = new Image();
            img1.src = baseCode1;
            let img2 = new Image();
            img2.src = baseCode2;
            addContent(baseCode, img1, img2, param);
        }).catch((err) => {
            console.log(err);
        });
    }

    let addContent = function (baseCode, img1, img2, param) {
        merge.additional(baseCode, param).then((baseImg) => {
            $("#1").attr("src", baseImg);
        }).catch((err) => {
            console.log(err);
        })
    }


    
</script>